<template>
    <div class="button">
        <el-button type="primary" @click="handleEdit(row)">
            修改信息<el-icon class="el-icon--edit">
                <Edit />
            </el-icon>
        </el-button>

        <el-button type="success" @click="handleSave(row)">
            保存修改<el-icon class="el-icon--save">
                <Check />
            </el-icon>
        </el-button>
        <el-button> 清空 </el-button>
    </div>

    <div>
        <el-table :data="tableData" border style="width: 95%" class="mt-4" size="large">
            <el-table-column prop="date" label="年份" min-width="90"></el-table-column>
            <el-table-column prop="" label="专利申请总数" min-width="120">
                <template #default="scope">
                    <span v-show="!scope.row.editing">{{ scope.row.name }} </span>
                    <el-input v-show="scope.row.editing" v-model="scope.row.name"></el-input>
                </template>
            </el-table-column>
            <el-table-column prop="" label="专利授权总数" min-width="120">
                <template #default="scope">
                    <span v-show="!scope.row.editing">{{ scope.row.address }} </span>
                    <el-input v-show="scope.row.editing" v-model="scope.row.address"></el-input>
                </template>
            </el-table-column>
            <el-table-column label="发明申请" min-width="100">
                <template #default="scope">
                    <span v-show="!scope.row.editing">{{ scope.row.value }} </span>
                    <el-input v-show="scope.row.editing" v-model="scope.row.value"></el-input>
                </template>
            </el-table-column>
            <el-table-column prop="" label="发明授权" min-width="100">
                <template #default="scope">
                    <span v-show="!scope.row.editing">{{ scope.row.netProfit }} </span>
                    <el-input v-show="scope.row.editing" v-model="scope.row.netProfit"></el-input>
                </template>
            </el-table-column>
            <el-table-column prop="" label="实用新型申请" min-width="120">
                <template #default="scope">
                    <span v-show="!scope.row.editing">{{ scope.row.netProfitRate }} </span>
                    <el-input
                        v-show="scope.row.editing"
                        v-model="scope.row.netProfitRate"
                    ></el-input>
                </template>
            </el-table-column>
            <el-table-column prop="" label="实用新型授权" min-width="120">
                <template #default="scope">
                    <span v-show="!scope.row.editing">{{ scope.row.rossLiabilities }} </span>
                    <el-input
                        v-show="scope.row.editing"
                        v-model="scope.row.grossLiabilities"
                    ></el-input>
                </template>
            </el-table-column>
            <el-table-column prop="" label="PCT专利申请" min-width="120">
                <template #default="scope">
                    <span v-show="!scope.row.editing">{{ scope.row.researchAndDevelopment }} </span>
                    <el-input
                        v-show="scope.row.editing"
                        v-model="scope.row.researchAndDevelopment"
                    ></el-input>
                </template>
            </el-table-column>
            <el-table-column prop="" label="PCT专利授权" min-width="120">
                <template #default="scope">
                    <span v-show="!scope.row.editing">{{ scope.row.proportionOfExpenses }} </span>
                    <el-input
                        v-show="scope.row.editing"
                        v-model="scope.row.proportionOfExpenses"
                    ></el-input>
                </template>
            </el-table-column>
            <el-table-column prop="" label="软件版权（项）" min-width="150">
                <template #default="scope">
                    <span v-show="!scope.row.editing">{{ scope.row.ratal }} </span>
                    <el-input v-show="scope.row.editing" v-model="scope.row.ratal"></el-input>
                </template>
            </el-table-column>
            <el-table-column prop="" label="商标" min-width="100">
                <template #default="scope">
                    <span v-show="!scope.row.editing">{{ scope.row.lev }} </span>
                    <el-input v-show="scope.row.editing" v-model="scope.row.lev"></el-input>
                </template>
            </el-table-column>
            <!-- <el-table-column label="Operate">
                <template #default="{ row }">
                    <el-button type="danger" link @click="handleDelete(row)">Delete</el-button>
                </template>
            </el-table-column> -->
        </el-table>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessageBox, ElNotification } from 'element-plus'

const tableData = ref([
    {
        date: '2021年',
        netProfit: '',
        netProfitRate: '',
        grossLiabilities: '',
        researchAndDevelopment: '',
        proportionOfExpenses: '',
        ratal: '',
        lev: '',
        bankLoan: '',
        exports: '',
        name: '',
        address: '',
        value: '',
        editing: false
    },
    {
        date: '2022年',
        netProfit: '',
        netProfitRate: '',
        grossLiabilities: '',
        researchAndDevelopment: '',
        proportionOfExpenses: '',
        ratal: '',
        lev: '',
        bankLoan: '',
        exports: '',
        name: '',
        address: '',
        value: '',
        editing: false
    },
    {
        date: '2023年',
        netProfit: '',
        netProfitRate: '',
        grossLiabilities: '',
        researchAndDevelopment: '',
        proportionOfExpenses: '',
        ratal: '',
        lev: '',
        bankLoan: '',
        exports: '',
        name: '',
        address: '',
        value: '',
        editing: false
    }
])

const handleEdit = () => {
    tableData.value.forEach((item) => {
        if (item.date === '增长率%') {
            item.editing = false
        } else {
            item.editing = true
        }
    })
}

const handleSave = () => {
    tableData.value.forEach((item) => {
        item.editing = false
    })
    console.log(tableData.value)
}

const handleDelete = (row) => {
    const index = tableData.value.indexOf(row)
    if (index !== -1) {
        tableData.value.splice(index, 1)
    }
}

const handleUpload = async () => {
    try {
        // 将更新后的数据发送到服务器
        const res = await fetch('/updateData', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(tableData.value)
        })
        // 处理服务器返回的响应
        if (res.ok) {
            console.log('数据上传成功')
            ElNotification({
                type: 'success',
                title: '数据上传成功',
                message: '更新的数据已经成功上传到服务器',
                position: 'top-left'
            })
        } else {
            console.error('数据上传失败')
            ElMessageBox.alert('数据上传失败，请联系管理员！', '上传失败', {
                confirmButtonText: '确定',
                position: 'top-right'
            })
        }
    } catch (err) {
        console.error(err)
        ElMessageBox.alert('数据上传失败，请联系管理员！', '上传失败', {
            confirmButtonText: '确定',
            position: 'top-right'
        })
    }
}
</script>

<style scoped>
.p-10,
.button {
    width: 50%;
    margin-left: 10px;
    margin-bottom: 10px;
    margin-top: 20px;
    border-top: '1px solid #007bff';
    border-bottom: '1px solid #007bff';
}
</style>
